<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <button>彭于晏</button>
    <button>胡歌</button>
    <img src="/pink/imgs/彭于晏.png" alt="图片正在加载中.." title="彭于晏"><br>
    <img src="/pink/imgs/zyz_txt/1.png" alt="">
    <div>小乔上午好</div>

    <button>按钮</button>
    <input type="text" value="赵玉真" di>
    <script>
        var btn = document.querySelectorAll('button')
        var img = document.querySelectorAll('img')
        var div = document.querySelector('div')
        var input = document.querySelector('input')
        // 1
        btn[0].onclick = () => {
            img[0].src = '/pink/imgs/彭于晏.png'
            img[0].title = '彭于晏'
        }
        btn[1].onclick = () => {
            img[0].src = "/pink/imgs/04.png"
            img[0].title = '胡歌'
        }
        //2
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img[1].src = '/pink/imgs/zyz_txt/1.png'
            div.innerHTML = '小乔上午好'
        } else if (h < 16) {
            img[1].src = '/pink/imgs/zyz_txt/2.png'
            div.innerHTML = '西施下午好'
        } else {
            img[1].src = '/pink/imgs/04.png'
            div.innerHTML = '胡歌晚上好'
        }

//3
//箭头函数没有this
btn[2].onclick=function(){
    // input.innerHTML='胡歌'// 只能普通标签如div等
    input.value='胡歌';
    // btn[2].disabled=true;
    this.disabled=true;
}

    </script>
</body>

</html>